<template>
  <div class="shelfbox">
    <div class="title">
      <h2>{{title}}</h2>
    </div>
    <!--内容 显示2行4列-->
    <div class="box">
      <div class="mbox" v-for="good in goods" :key="good.c_id">
        <!-- 图片 -->
        <div class="photo">
          <img :src="good.c_picture-url" alt="" />
        </div>
        <!-- 名称 -->
        <div class="name">
          {{ good.c_name }}
        </div>
        <!-- 描述 -->
        <div class="ps">
          {{ good.c_description }}
        </div>
        <!-- 价格 -->
        <div class="good-price">
          <div class="ds">
            <a>
              <button class = "gooddetail" style="margin: 0 5px ">查看详情</button>
            </a>
            <button
              class = "goodaddcart"
              style="margin: 0 5px"
              classStyle="main-btn"
            >会员租借</button>
          </div>
          <p>
            <span style="font-size: 14px">￥</span
            >{{ good.c_price }}
          </p>
        </div>
      </div>
    </div>

    <div style="display: flex;justify-content: flex-end">
        <span class="demonstration">显示总数</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page:1,
      total:10,
      size:10,
      goods:[],
      loading: false,
    };
  },
//   created() {
//   // 接收所有数据
// //     console.log(typeof this.goods);
//     let obj = {
//       token: localStorage.getItem("token"),
//     };
//     let abc = null;
//     let res = JSON.stringify(obj);
//     let xhr = new XMLHttpRequest();
//     xhr.open("POST", "http://localhost:8081/shelf", true);
//     xhr.onreadystatechange = function() {
//       if (xhr.readyState == 4 && xhr.status == 200) {
//         let responseText = JSON.parse(xhr.responseText);
//         abc = responseText;
//       }
//     };
//     xhr.send(res);
//     let self = this; // 保存this
//     setTimeout(function() {
// //         console.log(abc);
//         self.goods = abc
// //         console.log(typeof self.goods);
//     }, 1000);
//   },
mounted(){
   this.initgoods()
},
  methods: {
   handleSizeChange(currentSize){
        this.size = currentSize;
        this.initgoods();
    },
    handleCurrentChange(currentPage){
        this.page = currentPage;
        this.initgoods();
    },
    initgoods(){
      // console.log("2222");
      // this.loading = true;
      // // let url = '/home/allproductspage='+this.page+'$size='+this.size;
      // this.$axios.get('/home/allproducts',{params:{
      //   page = this.page,
      //   size = this.size
      // }}).then(res=>{
      //   if(res){
      //     this.goods = res.data;
      //     this.total = res.total;
      //     console.log("成功");
      //   }
      // });
      // this.loading = false
    },
    isNoLogin() {
      if (localStorage.getItem("token") == null) {
        window.location.href = "http://localhost:8080/login";
      } else {
        console.log("报错");
      }
    },
  },
  props: ["title"],
  components: {},
};
</script>
<style lang="scss" scoped>
.shelfbox {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);
  .title {
    padding-left: 30px;
    position: relative;
    z-index: 10;
    height: 60px;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: rgba(0, 0, 0, 0.06) 0 1px 7px;
    background: #f3f3f3;
    background: -webkit-linear-gradient(#fbfbfb, #ececec);
    background: linear-gradient(#fbfbfb, #ececec);
    line-height: 60px;
    font-size: 18px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      font-size: 18px;
      font-weight: 400;
      color: #626262;
      display: inline-block;
    }
  }
}
.box {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  justify-content: left;
  .mbox {
    width: 25%;
    height: 430px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    &:hover {
      transform: translateY(-3px);
      box-shadow: 1px 1px 20px #999;
      .good-price p {
        display: none;
      }
      .good-price .ds {
        display: block;
      }
    }
    .photo {
      background-color: white;
      display: flex;
      justify-content: center;
      img {
        width: 206px;
        height: 206px;
      }
    }
    .name {
      line-height: 2.5;
      font-family: 'Times New Roman', Times, serif;
      font-size: 20px;
      color: #424242;
      text-align: center;
      overflow: hidden;
      font-weight: 400;
    }
    .ps {
      line-height: 1.2;
      font-size: 16px;
      text-align: center;
      color: #d0d0d0;
      padding: 10px;
    }
    .good-price {
      margin: 15px 0;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #d44d44;
      font-family: Arial;
      font-size: 18px;
      font-weight: 700;
      .ds {
      width: 100%;
      display: none;
      .gooddetail{
        margin: 0 5px;
        border-radius: 5px;
        border: 1px solid #e1e1e1;
        height: 30px;
        color: #646464;
        background-color: #eee;
        background-image: linear-gradient(180deg,#f5f5f5,#eee);
        font-size: 12px;
        
      }
      .goodaddcart{
        margin: 0 5px;
        border-radius: 5px;
        border: 1px solid #5c81e3;
        height: 30px;
        background-color: #6c8cd4;
        background-image: linear-gradient(180deg,#6c8cd4,#4769c2);    
        font-size: 12px;
        color: #fff;
      }
    }
    }
  }
}
</style>